<template>
  <div class="change-info">
    <!-- 封面和头像一排 start phone 竖排 -->
    <div class="top-box-container flex">
      <!-- 修改封面 start  -->
      <div class="top-box">
        <div class="att-title">Cover</div>
        <!--  -->
        <div class="image-box cover-image-box" ref="userCoverImage"
          :style="{
            backgroundImage: `url(${aliveUserInfo.cover_url || defaultConfig.USER_COVER_URL})`
          }"
        ></div>
        <div class="image-operation">
          <div class="fill-link flex">
            <input type="text" name="cover_url"> <button type="button">选择链接</button> 
          </div>
          <div class="check-file flex">
            <div class="check-btn">
              选择文件<input ref="cover-file" type="file" @change="uploadCover" >
            </div>
            <div class="recover-btn">恢复</div>
          </div>
        </div>
      </div>
      <!-- 修改封面 end  -->
          <!-- 修改头像 start  -->
      <div class="top-box">
        <div class="att-title">Avatar</div>
        <!--  -->
        <div class="image-box avatar-image-box" ref="userAvatarImage"
          :style="{
            backgroundImage: `url(${aliveUserInfo.avatar_url || defaultConfig.AVATAR_URL})`
          }"
        ></div>
        <div class="image-operation">
          <div class="fill-link flex">
            <input type="text" name="avatar_url"> <button type="button">选择链接</button> 
          </div>
          <div class="check-file flex">
            <div class="check-btn">
              选择文件<input ref="avatar-file" type="file" @change="uploadAvatar" >
            </div>
            <div class="recover-btn">恢复</div>
          </div>
        </div>
      </div>
      <!-- 修改头像 end  -->
    </div>
    <!-- 封面和头像一排 end phone 竖排 -->

    <div class="motto-box">
      <div class="att-title">Motto</div>
      <textarea name="" id="" v-model="aliveUserInfo.motto"></textarea>
      <div class="recover-btn">恢复</div>
    </div>

    <div class="submit-box flex">
      <div class="submit-btn" @click="changeUserInfo">修改</div>
      <router-link tag="div"  class="cancel-btn" :to="{name: 'MineIndex'}">取消</router-link>
    </div>
  </div>
</template>

<script>
const $SERVER_URL = process.env.VUE_APP_SERVICE_API
import { uploadAvatar } from '__SERVICE__/files.js'
import { update } from '__SERVICE__/user.js'
import { SAVE_USER_INFO } from '__STORE__/operation-type'
import defaultConfig from '__CONFIG__/base-config.js'
export default {
  name: 'ChangeInfo',
  data: ()=>{
    return {
      aliveUserInfo: {
        cover_url: '',
        avatar_url: '',
        motto: ''
      }
    }
  },
  created() {
    //注意这一段的特殊性， 属性并不是响应式的
    const aliveUserInfo = this.$store.state.user.aliveUserInfo
    Object.assign(this.aliveUserInfo, aliveUserInfo)
    this.defaultConfig = defaultConfig
  },
  mounted() {
  },
  methods: {
    //上传文件
    async uploadCover(e, data) {
      const target = e.target
      const formdata = this.getFileFormData(target)
      try {
        const result = await uploadAvatar(formdata)
        const {data: {upload_url}} = result
        this.aliveUserInfo.cover_url = $SERVER_URL + upload_url
      }catch(e) {
        console.log(e)
      }
    },
    //上传头像api start
    async uploadAvatar(e, data) {
      const target = e.target
      const formdata = this.getFileFormData(target)
      try {
        const result = await uploadAvatar(formdata)
        const {data: {upload_url}} = result
        this.aliveUserInfo.avatar_url = $SERVER_URL + upload_url
      }catch(e) {
        console.log(e)
      }
    },
    // 获取文件的 fromdata形式 start
    getFileFormData(target) {
      const file = target.files[0]
      const fileName = file.name
      const fileSuffixIndex = fileName.lastIndexOf('.')
      const filePreffix = fileName.slice(0, fileSuffixIndex)
      const fileSuffix = fileName.slice(fileSuffixIndex+1)
      if('jpg png jpeg gif'.indexOf(fileSuffix) === -1) { // 文件格式无法匹配
        this.$Notice.error({title: '格式有误', desc: '只允许：jpg / png / jpeg / gif / ico', duration: 3000})
        return null
      }
      const formdata = new FormData()
      formdata.append(filePreffix, file)
      return formdata
    },
    // 获取文件的 fromdata形式 end
    async changeUserInfo() {
      const {motto, cover_url, avatar_url} = this.aliveUserInfo
      const { user_id, access_token } = this.$store.state.user.deadUserInfo
      const result = await update(user_id, {
        access_token, UPDATE: { motto, cover_url, avatar_url }
      })
      this.$store.dispatch(SAVE_USER_INFO, {
        access_token: result.data.access_token,
        motto, cover_url, avatar_url
      })
      this.$Notice.success({title: '操作', desc: '更新成功', duration: 3000})
    }
    //上传文件 end
  }
}
</script>

<style lang="less">
  @import url('__CSS__/change_info/change_info.less');
</style>